<template>
  <div id="welcome-box">
    <div class="top-box">
      <globle-linear-border class="top-box-aside">
        <hello></hello>
      </globle-linear-border>
      <globle-linear-border class="top-box-main">
        <class-card class="class-card"></class-card>
      </globle-linear-border>
    </div>
    <div class="bottom-box">
      <aside>
        <globle-linear-border class="aside-totalView">
          <total-view v-if="homePageData" :data="homePageData"></total-view>
        </globle-linear-border>
        <globle-linear-border class="aside-ratePie">
          <div id="ratePie"></div>
        </globle-linear-border>
      </aside>
      <main>
        <globle-linear-border class="main-perGradeCourse">
          <div id="perGradeCourse"></div>
        </globle-linear-border>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import echarts from '../../../echarts';
import { useAPI } from '../../../request/api';
import { useThemeStore } from '../../../store/theme';
import { useUserStore } from '../../../store/user';
import { IThemeColor, APIData, IHomePageChartParams, IHomePageChart } from '../../../type';
import { initRatePie } from './chartsInit/ratePie';
import { initPerGradeCourse } from './chartsInit/perGradeCourse';
import ClassCard from './components/ClassCard.vue';
import Hello from './components/Hello.vue';
import TotalView from './components/TotalView.vue';
const themeStore = useThemeStore();
const userStore = useUserStore();
const api = useAPI();

const homePageData = ref<IHomePageChart>();

const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);

themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

onMounted(async () => {
  await getData();
  initAllCharts();
});

const initAllCharts = () => {
  const data = homePageData.value;
  if (!data) return;
  // const passRate = (data.passStuNum / data.realityTotalStuNum).toFixed(2);
  initRatePie(echarts, document.querySelector('#ratePie') as HTMLElement, [data.passStuNum, data.realityTotalStuNum - data.passStuNum], themeColor.value);
  initPerGradeCourse(echarts, document.querySelector('#perGradeCourse') as HTMLElement, data.perSchoolYearChartY, dealPerStageWorkedData(), themeColor.value);
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#ratePie') as HTMLElement);
  echarts.dispose(document.querySelector('#perGradeCourse') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const dealPerStageWorkedData = () => {
  if (!homePageData.value) return [];
  const labelList = [] as string[];
  for (const item of homePageData.value.perSchoolYearChartX) labelList.push(`${item}学年`);
  return labelList;
};

const getData = async () => {
  const params: IHomePageChartParams = { workId: userStore.userInfo.workId };
  const res: APIData = await api.teacher.findHomePage(params);
  if (res.code === 200) homePageData.value = res.data;
  else ElMessage.error(res.message);
};
</script>

<style lang="scss" scoped>
#welcome-box {
  height: 100%;
  padding: 14px 32px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top-box {
    height: 35%;
    display: flex;
    justify-content: space-between;

    &-aside {
      width: 30%;
      height: 100%;
    }
    &-main {
      width: 69%;
      height: 100%;
    }
  }

  .bottom-box {
    height: 63%;
    display: flex;
    justify-content: space-between;

    aside {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .aside-totalView {
        height: 45%;
      }
      .aside-ratePie {
        height: 53%;
        #ratePie {
          height: 100%;
        }
      }
    }

    main {
      width: 69%;
      height: 100%;
      .main-perGradeCourse {
        height: 100%;
        #perGradeCourse {
          height: 100%;
        }
      }
    }
  }
}
</style>
